<template>
    <div class="paginationstyle">
        <div class="circle"></div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNo" :page-sizes="pagesSizes" :page-size=pageSize
            layout="total,->,prev, pager, next,sizes, jumper" v-model:total="total" class="fenyeqi">
        </el-pagination>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
defineProps(["total", "pageSize",'pageNo'])
const emits = defineEmits(["pageChange", "sizeChange"])
//存储总数据个数
// const total = ref(300);
//分页器当前的页码
//一页展示几条数据
// const pageSize = ref(5);
const pagesSizes = ref([15, 35, 50, 100])
//当每一页数量发生变化的时候钩子
const handleSizeChange = (val: number) => {
    emits('sizeChange', val)

}


// 点击当前页会把当前页的页数传给父组件
const handleCurrentChange = (val: number) => {
    emits('pageChange', val)
}
</script>

<style scoped lang="less">
:deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: cyan;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

:deep(.el-table .cell) {

    white-space: pre-line;
}

:deep(.el-pager li.is-active) {
    color: #f3a159;
    border: 1px solid #f3a159;
    border-radius: 4px;
}

:deep(.el-input) {
    --el-input-focus-border-color: #f3a159;
}

:deep(.el-pager li) {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin: 1px 4px;
}



:depp(.el-pager+button.btn-next[type=button]) {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.paginationstyle {
    background: #ffffff;
    padding: 10px 20px 10px 30px;
    position: relative;

    .fenyeqi {}

    .circle {
        width: 8px;
        height: 8px;
        background: #f3a159;
        border-radius: 50%;
        position: absolute;
        top: 25px;
        left: 20px;
    }
}

/*深度修改鼠标经过页码的颜色*/
:deep(.el-pager li:hover) {
    color: #f09a4e;
}

/*深度修改鼠标经过箭头的颜色*/
:deep(.el-pagination button:hover) {
    color: #f09a4e;
}

:deep(.el-select) {
    --el-select-border-color-hover: #f09a4e;
}

:deep(.el-input) {
    --el-input-hover-border-color: #f09a4e;
}

</style>